.blank
    height 96px
.mask
    position fixed
    z-index 10
    left 0
    top 0
    bottom 0
    right 0
    // background rgba(0, 0, 0, .4)
.wrapper-nav
    box-shadow 0px 3px 12px 0px rgba(0, 0, 0, .15)
    position fixed
    top 0
    z-index 500
    background-color #ffffff
    min-width 360px
    width 100%
    transition filter ease-out .3s
    &.blur
        filter blur(5px)
    .group-by
        width 180px
        height 48px
        position relative
        cursor default
        .group
            padding-left 18px
            line-height 48px
            font-size 14px
        .iconfont
            display inline-block
            transition transform linear .2s
            transform rotateX(0deg)
            margin-left 6px
            padding-right 18px
            font-size 14px
            color #707070
            &.rotate
                transform rotateX(180deg)
        .group-list
            position absolute
            max-height 0
            background-color #ffffff
            overflow hidden
            transition max-height linear .3s
            box-shadow 0px 3px 12px 0px rgba(0, 0, 0, .15)
            &.show
                max-height 400px
            .group-item
                border-bottom 1px solid #f0f0f0
                color #8B8B8B
                font-size 14px
                &:hover
                    background-color #f4f4f4
                &:nth-last-child(1)
                    border none

    .search-bar
        .search-input
            box-sizing border-box
            border 1px solid #ADADAD
            height 22px
            border-radius 12px
            width 136px
            padding 4px 24px 4px 12px
            font-size 14px
        .iconfont
            display inline-block
            line-height 22px
            font-size 14px
            color #ADADAD
            transform translateX(-130%)
            cursor pointer
    .top
        display flex
        justify-content space-between
        padding 12px 16px 12px
        height 48px
        box-sizing border-box
        width 100%
        border-bottom 1px solid #e3e3e3
        transition all ease-out .3s
        &.blur
            filter blur(5px)
        .left
            display flex
            align-items center
            .logo
                width 82px
                height 0px
                margin 3px 0
                padding-top 18px
                background-image url("../static/logo.png") 
                background-size cover
                background-repeat no-repeat
                cursor pointer
            .group-by-wrap
                margin-left 24px
            .slot
                line-height 18px
                .iconfont
                    margin-left 4px
                    color #ccc

        .right
            display flex
            align-items center
            .search-bar-wrap
                margin-right 12px
            .ticker
                // display inline-block
                color #919191
                display flex
                align-items center
                .num
                    margin-left 4px
            .user
                // display inline-block
                padding-left 12px
                color #424242
            .lottery
                width 18px
                height 18px
                background-image: url('../static/icon-lo.png')
                background-size cover
                margin-left 10px
            .quit
                // display inline-block
                width 24px
                padding 4px 0
                text-align center
                margin-left 10px
                .iconfont
                    font-size 16px
                    color #2A76DC
            .login 
                border none 
                outline none
                background #4D93F1
                margin-right 3vw
                padding 0
                height 24px
                width 48px
                border-radius 112px
                color #ffffff
                transition all ease-out .2s
                &:hover
                    color #eeeeee





@media(max-width 799px)
    .wrapper-nav
        .group-by-wrap
            display none
        .search-bar-wrap
            display none
        .group-by
            .group-list
                width 100vw
                .group-item
                    box-sizing border-box
                    width 100%
                    height 44px
                    line-height 32px
                    padding 6px 18px
                    // margin 0 18px

                
        .top
            // .logo
            //     margin 5px 0
            //     width 64px
            //     padding-top 14px
            .slot
                font-size 12px
                line-height 18px
                color #424242
                .iconfont
                    font-size 10px
            .right
                font-size 12px
                .quit
                    width 24px
        .bottom
            box-sizing border-box
            height 48px
            display flex
            justify-content space-between
            align-items center
            padding 12px 16px 12px 0
            border-bottom 1px solid #f7f7f7
                    
@media(min-width 800px)
    .blank
        height 48px
    .wrapper-nav
        .search-bar-wrap
            .search-bar
                .search-input
                    width 50px
                    transition width linear .3s
                    padding 0 22px 0 0
                    &.active
                        width 136px
                        padding 4px 22px 4px 12px 
        .group-by
            .group-list
                width 100%
                .group-item
                    height 32px
                    line-height 32px
                    padding 3px 6px
                    margin 0 6px
        .slot
            .iconfont
                font-size 12px
                line-height 16px
        .bottom
            display none
